<template>
  <grid>
    <div class="timeline-list__body">
      <h2 class="year-show__body">2019</h2>
      <el-timeline>
        <el-timeline-item v-for="(item,index) in list"
                          :key="index">
          <div class="timeline-card__body">
            <router-link class="router-link-title"
                         :to="{
                            name:'article',
                            params:{
                              id: `${item.id}`
                            }
                         }">
              <h3 class="timeline-title">{{item.title}}</h3>
            </router-link>
            <p class="publish-time">{{ item.created_at | timeFilter('before') }}</p>
          </div>
        </el-timeline-item>
      </el-timeline>
    </div>
  </grid>
</template>
<script>
import { mapActions, mapGetters } from 'vuex'
import itemList from "@/components/item-list";

export default {
  name: 'archive',
  title: '时间轴 | 流逝的时光中做了什么呢',
  data () {
    return {
      query: {
        page: 1,
        limit: 12
      }
    }
  },
  components: {
    itemList
  },
  computed: {
    ...mapGetters('archive', ['list', 'total'])
  },
  async asyncData ({ store, route }) {
    const { query } = route;
    return store.dispatch('archive/fetchList', { page: 1, limit: 12 })
  },
  methods: {
    ...mapActions('archive', ['fetchList']),
  }
}
</script>

<style lang="scss" scoped>
.timeline-list__body {
  margin-left: 45px;
}
.timeline-card__body {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  text-align: left;
  .timeline-title {
    margin: 0;
  }
  .publish-time {
    margin-bottom: 5px;
  }
}
.year-show__body {
  text-align: left;
}
.el-timeline-item {
  margin-bottom: 15px;
}
</style>